﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chatriq - Chat & Taskmanager</title>
    <meta name="description" content="The ultimate Bootstrap based Messaging framework to help build Messaging or Chat application fast and easy. Fully responsive and crafted with modern elements and latest design">
    <meta name="keywords" content="Chatriq, chat, messaging, theme, platform"/>
    <meta name="subject" content="">
    <meta name="copyright" content="">
    <link rel="icon" href="../assets/images/favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" type="text/css" href="../dist/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" type="text/css" href="../dist/css/app.css">
    <link rel="stylesheet" type="text/css" href="../dist/css/theme/default-theme.css">
</head>
<body class="default-theme">
   <!-- Preloader Start -->
   <div class="preloader"></div>
   <!-- Preloader end -->

   <!-- main wrapper start -->
   <div class="main-wrapper">
       <div class="chatapp">
           <!-- navbar start -->
           <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top bg-white border-bottom shadow-sm">
               <a class="navbar-brand" href="../index.html">
                   <img src="../assets/images/logo.svg" width="50" height="50" class="d-inline-block align-top" alt="">
                   <h1>Chatriq</h1>
               </a>
            
               <div class="ml-auto d-flex align-items-center">
                   <div class="iconbox iconbox-search btn-hovered-light">
                       <i class="iconbox__icon mdi mdi-magnify"></i>
                   </div>
                   <div class="navbar-nav">
                       <div class="iconbox-group">
                           <div class="iconbox btn-hovered-light">
                               <i class="iconbox__icon mdi mdi-wallet-outline"></i>
                           </div>
                           <div class="iconbox btn-hovered-light">
                               <i class="iconbox__icon mdi mdi-diamond-stone"></i>
                           </div>
                           <div class="iconbox btn-hovered-light">
                               <i class="iconbox__icon mdi mdi-bell-ring-outline"></i>
                           </div>
                           <div class="iconbox btn-hovered-light">
                               <i class="iconbox__icon mdi mdi-dots-vertical"></i>
                           </div>
                       </div>
                       <div class="dropdown idelUser-nav">
                           <div class="idelUser-avatar idelUser-avatar-sm idelUser-avatar-rounded" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="chatriq-idelUser chatriq-idelUser-01"></div>
                           </div>
                           <div class="dropdown-menu dropdown-menu-right">
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-account-outline"></i></span> 
                                   <span>Profile</span>
                               </a>
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-account-multiple-plus-outline"></i></span> 
                                   <span>Invite People</span>
                               </a>
                               
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-settings-outline"></i></span> 
                                   <span>Settings</span>
                               </a>
                               
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-help-circle-outline"></i></span> 
                                   <span>Help</span>
                               </a>
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-comment-quote-outline"></i></span> 
                                   <span>Feedback</span>
                               </a>
                               <div class="dropdown-divider"></div>
                               <a class="dropdown-item" href="javascript:;">
                                   <span><i class="mdi mdi-logout-variant"></i></span> 
                                   <span>Logout</span>
                               </a>
                           </div>
                       </div>
                       <div class="iconbox-searchbar">
                           <form>
                               <input type="text" class="form-control" placeholder="Search here..." autofocus>
                               
                               <button class="search-submit" type="submit">
                                   <i class="mdi mdi-magnify"></i>
                               </button>
                               <a href="javascript:void(0)" class="search-close">
                                   <i class="mdi mdi-arrow-left"></i>
                               </a>
                           </form>
                       </div>
                   </div>
               </div>
           </nav>
           <!-- navbar end -->

            <!-- sidebar start -->
            <div class="chatapp__sidebar">
                <ul class="nav" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link " href="index.html">
                            <i class="mdi mdi-message-text-outline"></i><span>Chats</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="privateChat.html">
                            <i class="mdi mdi-phone-outline"></i><span>Calls</span>
                        </a>
                    </li>
            
                    <li class="nav-item">
                        <a class="nav-link" href="contacts.html">
                            <i class="mdi mdi-account-box-outline"></i><span>Contacts</span>
                        </a>
                    </li>

                    <li class="nav-item nav-item-todo">
                        <a class="nav-link" href="todo.html" >
                            <i class="mdi mdi-checkbox-marked-outline"></i><span>To-Do</span>
                        </a>
                    </li>

                    <li class="nav-item sidebar-bottom-nav nav-item-help">
                        <a class="nav-link active" href="help.html" title="Help">
                            <i class="mdi mdi-help-circle-outline"></i><span>Help</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- sidebar end -->

            <!-- main content start -->
            <div class="chatapp__content">
                <div class="custom-scrollbar w-100">
                    <div class="container">
                        <div class="docs-content">
                            <div class="border-bottom pb-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Chatriq Documentation
                                            v1.0.0</h6>
                                        <p>
                                            Thank you so much to see our template. This document is for the HTML version We are trying to explain about chatriq, if you have any questions about chatriq, please feel free to contact us.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Introduction</h6>
                                        <p>
                                            A Chatriq Taskmanager is modern and clean Bootstrap 4 based template. It is build using HTML, CSS3, JavaScript. We are using we are using CSS pre-processor SCSS. It is super easy to customize and 100% responsive. It can be used for most type of live chat, discussion and messenger type app templates, Live Chat, Also, you can create a social networking web app with a profile page, newsfeed and messenger.
                                            <br><br>
                                            It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load. This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get start open the template download package. We have used gulp task runner so you can run and manager your application shorter, simpler and faster.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Files Structure</h6>
                                        <div class="card">
                                            <div class="card-body">
                                                <ul class="file-structure">
                                                    <li>
                                                        <span>chatriq</span>
                                                        <ul>

                                                            <li>
                                                                <span>demos</span>
                                                                <ul>
                                                                    <li>
                                                                        <span>LTR</span>
                                                                        <ul>
                                                                            <li>
                                                                                <span>default-dark</span>
                                                                                <ul>
                                                                                    <li>
                                                                                        <span>assets</span>
                                                                                        <ul>
                                                                                            <li>fonts/</li>
                                                                                            <li>images/</li>
                                                                                            <li>vendors/</li>
                                                                                        </ul>
                                                                                    </li>
                                                                                    <li>
                                                                                        <span>dist</span>
                                                                                        <ul>
                                                                                            <li>
                                                                                                <span>css/</span>
                                                                                                <ul>
                                                                                                    <li>theme/</li>
                                                                                                </ul>
                                                                                            </li>
                                                                                            <li>js</li>
                                                                                        </ul>
                                                                                    </li>
                                                                                    <li>scss/</li>
                                                                                    <li>index.html</li>
                                                                                </ul>
                                                                            </li>
                                                                            <li>
                                                                                <span>default-light</span>
                                                                                <ul>
                                                                                    <li>
                                                                                        <span>assets</span>
                                                                                        <ul>
                                                                                            <li>fonts/</li>
                                                                                            <li>images/</li>
                                                                                            <li>vendors/</li>
                                                                                        </ul>
                                                                                    </li>
                                                                                    <li>
                                                                                        <span>dist</span>
                                                                                        <ul>
                                                                                            <li>
                                                                                                <span>css/</span>
                                                                                                <ul>
                                                                                                    <li>theme/</li>
                                                                                                </ul>
                                                                                            </li>
                                                                                            <li>js</li>
                                                                                        </ul>
                                                                                    </li>
                                                                                    
                                                                                    <li>scss/</li>
                                                                                    <li>index.html</li>
                                                                                </ul>
                                                                            </li>
                                                                        </ul>
                                                                    </li>
                                                                    <li>
                                                                        <span>RTL/</span>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <span>development</span>
                                                                <ul>
                                                                    <li>
                                                                        <span>app</span>
                                                                        <ul>
                                                                            <li>
                                                                                <span>assets</span>
                                                                                <ul>
                                                                                    <li>fonts</li>
                                                                                    <li>images</li>
                                                                                    <li>vendors</li>
                                                                                </ul>
                                                                            </li>
                                                                            <li>
                                                                                <span>dist</span>
                                                                                <ul>
                                                                                    <li>
                                                                                        <span>css/</span>
                                                                                        <ul>
                                                                                            <li>theme/</li>
                                                                                        </ul>
                                                                                    </li>
                                                                                    <li>js</li>
                                                                                </ul>
                                                                            </li>
                                                                            <li>scss/</li>
                                                                            <li>index.html</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li>gulpfile.js</li>
                                                                    <li>package.json</li>
                                                                </ul>
                                                                
                                                            </li>
                                                            <li>documentations</li>

                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Setup Development
                                            Environment</h6>

                                        <ol class="orderlist pt-4">
                                            <li>
                                                <p class="text-dark font-weight-medium">Install NodeJS</p>
                                                <p>
                                                    Before installing gulp and sass first you must have NodeJs
                                                    installed, NodeJS will have npm (node
                                                    packaged modules).
                                                    Download and install Node.js from <a
                                                        href="https://nodejs.org/en/download/"
                                                        target="_blank">nodejs.org/en/download/</a>
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-dark font-weight-medium">Gulp Setup</p>
                                                <p>
                                                    Before installing gulp first you must have NodeJs installed,
                                                    NodeJS will have npm (node packaged
                                                    modules).Download and install Gulp JS from <a
                                                        href="https://gulpjs.com/"
                                                        target="_blank">https://gulpjs.com/</a>
                                                </p>
                                                <p>
                                                    Gulp is a toolkit for automating painful or time-consuming tasks
                                                    in your development workflow, so you
                                                    can stop messing around and build something.
                                                </p>
                                                <pre class="code">npm install --global gulp-cli</pre>
                                                <p>
                                                    If you have previously installed a version of gulp globally,
                                                    please run npm rm --global gulp to make
                                                    sure your old version doesn't collide with gulp-cli.
                                                </p>
                                                <pre class="code">npm rm --global gulp</pre>
                                                <p>
                                                    Verify that gulp in successfully installed, and version of
                                                    installed gulp will appear.
                                                </p>
                                                <pre class="code">gulp --version</pre>
                                            </li>
                                            <li>
                                                <p class="text-dark font-weight-medium">Install dependencies.</p>
                                                <p>
                                                    You're moments away to see the dashboard template up and running
                                                    in your local machine. First, go to
                                                    the root folder where the package.json located. In your download
                                                    package it should be in the root
                                                    folder. Please run the following command below.
                                                </p>
                                                <pre class="code">npm install</pre>
                                                <p>
                                                    This will download all dependencies defined in package.json
                                                    file. Once it finished running the
                                                    command, it will generate a folder name node_modules/ where you
                                                    see downloaded files.
                                                </p>
                                            </li>
                                            <li>
                                                <p class="text-dark font-weight-medium">Running in Browser</p>
                                                <p>Now you're good to go in running the template and preview it in
                                                    browser by running the command below.
                                                </p>
                                                <pre class="code">gulp default</pre>
                                                <p>This should automatically open up a browser window with the
                                                    website running. Once the development
                                                    server is up and running any changes you make to the HTML & JS &
                                                    SASS files will be auto updated in
                                                    your browser window.</p>
                                            </li>
                                        </ol>

                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Change Skin</h6>
                            
                                        <ol class="orderlist pt-4">
                                            <li>
                                            <p class="text-dark font-weight-medium">Link CSS File</p>
                                            <p>
                                               All theme CSS file are placed in <span class="folderpath">dist/css/theme</span>  folder. Select a theme you wish to apply and link above close <code class="highlighter-rouge">&lt;head&gt;</code> tag
                                            </p>
                                            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="na">href=</span><span class="s">"./css/theme/default-theme.css"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">&gt;</span></code></pre></figure>
                                            <p>Change class in body tag</p>
                                            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body</span> <span class="na">class=</span><span class="s">"default-theme"</span><span class="nt">&gt;</span></code></pre></figure>
                                            <p>List of pre-built theme class</p>
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <tr>
                                                    <td><code class="highlighter-rouge">.default-theme</code></td>
                                                    <td><code class="highlighter-rouge">.default-dark-theme</code></td>
                                                    
                                                    </tr>
                                                </table>
                                                
                                            </div>
                                            </li>
                                        </ol>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">RTL Layout</h6>
                            
                                        <ol class="orderlist pt-4">
                                            <li>
                                            <p class="text-dark font-weight-medium">Link RTL CSS File</p>
                                            <p>
                                               RTL CSS file are placed in <span class="folderpath">dist/css/</span>  folder.
                                            </p>
                                            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="na">href=</span><span class="s">"./dist/css/rtl.css"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">&gt;</span></code></pre></figure>
                                            <p>Change class in body tag</p>
                                            <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;body</span> <span class="na">class=</span><span class="s">"rtl"</span><span class="nt">&gt;</span></code></pre></figure>
                                            <p>List of pre-built theme class</p>
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <tr>
                                                    <td><code class="highlighter-rouge">.default-theme .rtl</code></td>
                                                    <td><code class="highlighter-rouge">.default-dark-theme .rtl</code></td>
                                                    
                                                    </tr>
                                                </table>
                                                
                                            </div>
                                            </li>
                                        </ol>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">References</h6>
                                        <p>
                                            We are using some JS and CSS plugins for creating chatriq Messaging
                                            Platform template.
                                        </p>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Plugins/Libray Name</th>
                                                        <th scope="col">Link</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>jQuery</td>
                                                        <td><a href="https://jquery.com/"
                                                                class="tb-link">https://jquery.com/</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>Bootstrap</td>
                                                        <td><a
                                                                href="https://getbootstrap.com/">https://getbootstrap.com/</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Material Floating Button</td>
                                                        <td><a
                                                                href="https://github.com/nobitagit/material-floating-button">https://github.com/nobitagit/material-floating-button</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Perfect Scrollbar</td>
                                                        <td><a
                                                                href="https://github.com/mdbootstrap/perfect-scrollbar">https://github.com/mdbootstrap/perfect-scrollbar</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Slick</td>
                                                        <td><a
                                                                href="https://kenwheeler.github.io/slick/">https://kenwheeler.github.io/slick/</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Sortable</td>
                                                        <td><a
                                                                href="https://sortablejs.github.io/Sortable/">https://sortablejs.github.io/Sortable/</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Material Design Icons</td>
                                                        <td><a
                                                                href="https://materialdesignicons.com/">https://materialdesignicons.com/</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>SVG Icons</td>
                                                        <td><a
                                                                href="https://www.flaticon.com/">https://www.flaticon.com/</a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="border-bottom py-4">
                                <div class="row">
                                    <div class="col-12">
                                        <h6 class="pb-2 text-uppercase font-weight-semibold">Customer Support
                                        </h6>
                                        <p>
                                            Our support generally operates from <b>9AM – 7PM GMT+5.30</b> time from <b>Monday
                                            –Friday.</b> The support response time is 24-48 hours but normally we tend to settle
                                            thequestions as earlier as possible (even earlier than 24 hours).
                                        </p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- main content end -->
        </div>
    </div>
     <!-- main wrapper end -->
    <!-- Javascripts Files -->
    <script src="dist/js/jquery-3.3.1.slim.min.js" ></script>
    <script src="dist/js/popper.min.js" ></script>
        <script src="assets/vendors/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="assets/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="dist/js/main.js"></script>
</body>
</html>
